<template>
    <el-popover placement="top" :width="200" trigger="hover" @show="priceInputRef.focus()" @hide="priceInput = null" :hide-after="0">
        <template #reference>
            <Icon name="fa fa-pencil" class="ml-2 text-sky-500 text-base cursor-pointer"></Icon>
        </template>
        <span class="text-sm">批量修改</span>
        <div class="flex mt-1">
            <el-input
                v-model="priceInput"
                size="small"
                class="mr-1"
                @keyup.enter="changeBatchPrice(priceInput)"
                :ref="(el) => (priceInputRef = el)"
                @input="
                    (val) => {
                        priceInput = inputNumber(val)
                    }
                "
                placeholder="输入数字,按回车保存"
            ></el-input>
        </div>
    </el-popover>
</template>
<script setup>
import { ref } from 'vue'
import { inputNumber } from '/@/utils/tools'
const emits = defineEmits(['edit'])
let priceInput = ref(null) // 批量修改价格绑定值
let priceInputRef = ref(null) // 批量修改价格输入框实例
const changeBatchPrice = (input) => {
    emits('edit', input)
}
</script>
